<script setup lang="ts">
import { ref, shallowRef, onMounted, watch, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import { useRouter, useRoute } from 'vue-router'
import { usePaperStore } from '../stores/papers'
import { useTestController, TestController, type ISettingData } from '../function/test-controller'
import { Setting } from '../function/setting'
import type { ITestPaper } from '../lib/test'
import MarkdownView from '@/components/MarkdownView.vue'

const router = useRouter()
const route = useRoute()

const { loadPaper } = usePaperStore()

// 状态
const isLoading = ref(true)

// 错误
const error = ref<string | null>(null)

const levelFom = reactive({
    model: false,
    handleOk() {
        this.model = false
        const testItem = testController.value!.currentTestItem.value
        testController.value!.setLevel(testItem, testItem.level)
    },
    handleCancel() {
        this.model = false
    },
})

// 试卷对象
const paper = ref<ITestPaper | null>(null)

// 试卷控制器
const testController = shallowRef<TestController | null>(null)

// 试卷配置器
const setting = shallowRef<Setting<ISettingData> | null>(null)

// 默认数据
const defaultCategorys = ref<ISettingData["categorys"]>([])
const defaultLevels = ref<ISettingData["levels"]>([])

// 是否展示答案
const isShowAnswer = ref(false)


loadPaper(route.params.paperName as string).then((_paper) => {

    isLoading.value = true

    paper.value = _paper

    const controller = useTestController(paper.value)

    testController.value = controller.testController
    setting.value = controller.setting

    defaultCategorys.value = [...setting.value!.get("categorys")]
    defaultLevels.value = [...setting.value!.get("levels")]

    onMounted(() => {
        watch(
            () => testController.value!.messageList,
            (messageList) => Message.info(messageList.value.at(-1) as string)
        )
    })

}).catch((e) => {
    error.value = e.message

}).finally(() => {
    setTimeout(() => isLoading.value = false, 300)
})



</script>


<template>

    <div v-if="error" class="flex justify-center items-center h-full w-full">
        {{ error }}
    </div>

    <div v-else-if="isLoading" class="flex justify-center items-center h-full w-full">
        <a-spin tip="加载中..." />
    </div>

    <div v-else-if="paper" class="flex flex-col h-full w-full gap-1">

        <div class="flex items-center gap-1 p-2  h-10 bg-white">
            <div class="flex-1 text-center">{{ paper!.name }}</div>
            <a-button type="text" @click="router.back()">
                <template #icon>
                    <icon-undo size="20" />
                </template>
            </a-button>
        </div>

        <div class="flex flex-col p-2 gap-2 bg-white">

            <div class="flex items-center">
                <div class=" text-xs w-[4rem]">选择分类</div>
                <div class=" flex-1">
                    <a-select v-model="setting!.data.value.categorys" :options="defaultCategorys" size="small"
                        placeholder="选择分类" multiple :max-tag-count="2">
                        <template #header>
                            <div style="padding: 6px 12px;">
                                <a-checkbox :default-checked="true"
                                    @change="(value: boolean) => { setting!.data.value.categorys = value ? defaultCategorys : [] }">全选</a-checkbox>
                            </div>
                        </template>
                    </a-select>
                </div>
            </div>

            <div class="flex items-center">
                <div class=" text-xs w-[4rem]">难度等级</div>
                <div class=" flex-1">
                    <a-select v-model="setting!.data.value.levels" :options="defaultLevels" size="small"
                        placeholder="选择等级" multiple :max-tag-count="4">
                        <template #header>
                            <div style="padding: 6px 12px;">
                                <a-checkbox :default-checked="true"
                                    @change="(value: boolean) => { setting!.data.value.levels = value ? defaultLevels : [] }">全选</a-checkbox>
                            </div>
                        </template>
                    </a-select>
                </div>
            </div>

            <div class="flex items-center">
                <div class=" text-xs w-[4rem]">测试数量</div>
                <div class=" flex-1">
                    <a-input-number v-model="setting!.data.value.num" size="small" placeholder="测试数量" :min="1"
                        :max="paper!.items.length" />
                </div>
            </div>

            <div class="flex items-center">
                <div class=" text-xs w-[4rem]">随机排序</div>
                <div class=" flex-1">
                    <a-switch v-model="setting!.data.value.random" size="small" />
                </div>
            </div>

            <a-button size="small" @click="testController!.start()">开始测试</a-button>
        </div>

        <div class="flex flex-col flex-1 p-2 overflow-auto bg-white">

            <div class="flex flex-col gap-2" v-if="testController!.currentTestItem.value">

                <a-card>

                    <template #title>
                        <div class="flex items-center">
                            <div class="text-xs">类型：<span class=" text-gray-500">{{
                                testController!.currentTestItem.value.category }}</span>
                            </div>
                            <div class="text-xs ml-2">难度等级：<span class=" text-gray-500">{{
                                testController!.currentTestItem.value.level }}</span>
                            </div>
                        </div>
                    </template>

                    <template #actions>

                        <a-button size="small" @click="levelFom.model = true">设置等级</a-button>
                        <a-modal width="60%" v-model:visible="levelFom.model" @ok="levelFom.handleOk()"
                            @cancel="levelFom.handleCancel()">
                            <template #title>
                                设置等级
                            </template>
                            <div>
                                <a-select v-model="testController!.currentTestItem.value.level" :options="defaultLevels"
                                    placeholder="选择等级"></a-select>
                            </div>
                        </a-modal>

                        <a-button size="small" @click="isShowAnswer = !isShowAnswer">{{ isShowAnswer ? '隐藏' : '显示'
                            }}答案</a-button>

                    </template>

                    <!-- 标题 -->
                    <MarkdownView :content="testController!.currentTestItem.value.title"> </MarkdownView>

                </a-card>

                <a-card>
                    <a-textarea placeholder="写字板" :auto-size="{ minRows: 5 }" allow-clear />
                </a-card>

                <a-card v-show="isShowAnswer">

                    <!-- 内容 -->
                    <MarkdownView :content="testController!.currentTestItem.value.content"> </MarkdownView>

                </a-card>


            </div>

            <div v-else class="flex flex-1 justify-center items-center text-stone-400 text-xs">
                等待测试
            </div>

        </div>

        <div class="flex p-1 gap-2 items-center bg-white">
            <a-button size="small" long @click="testController!.prev()">上一个</a-button>
            <div>

                <div class=" text-center" v-if="testController!.status">
                    {{ testController!.index.value + 1 }}/{{ testController!.testItems.value.length }}
                </div>
                <div class=" text-center w-[2rem]" v-else>--/--</div>

            </div>
            <a-button size="small" long @click="testController!.next()">下一个</a-button>
        </div>

    </div>

</template>

<style>
.arco-spin-tip {
    color: #666
}
</style>
